<template>
    <div>
        <div class="myorder">
              <div class="order-top">
                  <div class="collect">
                      <i class="bi bi-star"></i>
                      <span>&nbsp;我的收藏</span>
                  </div>
                  <div class="brow">
                      <i class="bi bi-clock"></i>
                      <span>&nbsp;浏览记录</span>
                  </div>
                  <div class="coupon">
                      <i class="bi bi-ticket-detailed"></i>
                      <span>&nbsp;优惠劵</span>
                  </div>
              </div>
              <div class="order-manage">
                  <div class="ording">
                      <div class="l-ord">
                          <span>订单管理</span>
                      </div>
                      <div class="r-old">
                          <span>全部订单</span>
                          <i class="bi bi-chevron-compact-right"></i>
                      </div>
                  </div>
                  <div class="orderList">
                      <ul>
                        <li>
                            <a href="#">
                                <div class="order-grow">
                                   <div>
                                        <i class="bi bi-wallet2"></i>
                                   </div>
                                    <span>待付款</span>
                                </div>
                            </a>
                        </li>
                           <li>
                            <a href="#">
                                <div class="order-grow">
                                    <div>
                                        <i class="bi bi-layout-sidebar"></i>
                                    </div>
                                    <span>待发货</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="order-grow">
                                    <div>
                                        <i class="bi bi-truck"></i>
                                    </div>
                                    <span>待收货</span>
                                </div>
                            </a>
                        </li>
                         <li>
                            <a href="#">
                                <div class="order-grow">
                                   <div>
                                        <i class="bi bi-chat-square-text"></i>
                                   </div>
                                    <span>待评价</span>
                                </div>
                            </a>
                        </li>
                         <li>
                            <a href="#">
                                <div class="order-grow">
                                   <div>
                                        <i class="bi bi-handbag"></i>
                                   </div>
                                    <span>退款/售后</span>
                                </div>
                            </a>
                        </li>
                      </ul>
                  </div>
              </div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less">
.myorder{
    width: 95%;
    height: 200px;
    border-radius: 10px;
    background: #fff;
    margin-top: 10px;
    margin-left:10px;
    margin: 10px;
}
.order-top{
    height: 50px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    div{
        flex-grow: 1;
        height: 20px;
        text-align: center;
        margin-top: 15px;
        border-right: 1px solid #f0f0f0;
        span{
           font-size: 16px;
        }
        i{
            font-size: 20px;
            line-height: 20px;
        }
    }
}
.order-manage{
    .ording{
        height: 50px;
        font-size: 16px;
        .l-ord{
            width: 100px;
            height: 50px;
            line-height: 50px;
            float: left;
            font-weight: bold;
            margin-left: 10px;
        }
        .r-old{
            width: 80px;
            height: 50px;
            line-height: 50px;
            float: right;
            margin-right: 10px;
            i{
                font-weight: bold;
            }
        }
    }
    .orderList{
        ul{
            display: flex;
            justify-content: space-evenly;
            li{
                width: 60px;
                height: 60px;
                text-align: center;
                padding-top: 20px;
                i{
                    color: #b077bc;
                    font-size: 25px;
                }
                span{
                   font-size: 14px;
                }
            }
        }
    }
}

</style>